<docs>
  ## 编辑个人基本信息
</docs>
<template>
  <div class="wrap">
    <div class="tab-wrap">
      <div @click="data.cur=0" :class="{active:data.cur==0}">人员信息</div>
      <div @click="data.cur=1" :class="{active:data.cur==1}">求职意向</div>
      <div @click="data.cur=2" :class="{active:data.cur==2}">工作经历</div>
      <div @click="data.cur=3" :class="{active:data.cur==3}">学习经历</div>
      <div @click="data.cur=4" :class="{active:data.cur==4}">其他信息</div>
    </div>
    <component :is="currentTab"></component>
  </div>
</template>
<script>
import baseInfo from '../baseInfo/pBaseInfo'
import jobIntent from '../baseInfo/jobIntent'
import workHistory from '../baseInfo/workHistory'
import schoolExper from '../baseInfo/schoolExper'
import otherInfo from '../baseInfo/otherInfo'

export default {
  name: 'editResume',
  components: { baseInfo, jobIntent, workHistory, schoolExper, otherInfo },
  data() {
    return {
      data: {
        tabs: ['baseInfo', 'jobIntent', 'workHistory', 'schoolExper', 'otherInfo'],
        cur: 0 //默认选中第一个tab
      }
    };
  },
  computed: {
    currentTab: function(){
      return this.data.tabs[this.data.cur];
    }
  },
  methods: {
  },
  created() {
  }
};
</script>
<style scoped lang="scss">
@import '~common/scss/var.scss';
.wrap {
  background: $color-bg;
  .tab-wrap {
    display: flex;
    background-color:#149dee;
    color: #ffffff;
    div {
      flex: 5;
      text-align: center;
      padding: 25px 0;
    }
    .active {
      background-color: #246fde;
      font-weight: 600;
    }
  }
}
</style>
